<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        v-for指令
            1.用于展示列表数据
            2.语法： v-for="(item, index) in items" ;key="xx"
            3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

            区别
            数组的 v-for： 通过 (item, index) in array 遍历数组，获取数组的每个元素和索引。

            对象的 v-for： 通过 (value, key) in object 遍历对象，获取对象的每个属性值和属性名。

            key 的用途： 在 v-for 中使用 :key 是为了帮助 Vue 识别节点，以提高渲染的性能。
                        在遍历数组时，使用索引作为 key，而在遍历对象时，使用属性名作为 key。
     -->
    <div id="app">
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(p,index) in phones" :key="p.id">
                {{p.name}} : {{p.price}} No:{{p.id}}
            </li>
        </ul>

        <!-- 遍历对象 -->
        <ul>
            <li v-for="(value,key) in phone">
                {{key}}--{{value}}
            </li>
        </ul>

    </div>


    <script>
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    phones: [
                        {id:1,name:"Huawei Mate 60",price:6999},
                        {id:2,name:"Huawei P 60",price:7999},
                        {id:3,name:"Huawei Mate X",price:9999}
                    ],
                    phone:{
                        name:"iphone 15 pro",
                        price:5999,
                        color:"red"
                    }
                };
            },
        })
    </script>
</body>
</html>